"use client"
import React, { use, useEffect, useState } from 'react';
import { Button, DatePicker, Divider, Input, Menu, Select, Space, Table, Tag,Popconfirm } from 'antd';
import type { MenuProps, TableProps } from 'antd';
import * as Async from '../../../store/splice'
import  {useDispatch,useSelector} from 'react-redux'
import MyForm from '../../../../commponent/MyForm';
import {store} from '../../../store/index'
import { Modal } from 'antd';
import AppLayout from '@/commponent/index'
import {
  CheckCircleFilled,
  EditFilled,
  VerticalAlignTopOutlined,
  DeleteFilled,
  SearchOutlined,
  RedoOutlined,
  ZoomInOutlined
} from '@ant-design/icons';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
  id: number
  key: string
  name: string
  Customer: string
  stage: string
  bjnum: string
  price: string
  time: number
  days: number
}


//表格数据


//三级导航数据
type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    key: 'a',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        财务
      </a>
    ),
  },
  {
    key: 'b',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        财务报表
      </a>
    ),
  },
  {
    key: 'c',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        下属财务
      </a>
    ),
  },
  {
    key: 'd',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        下属写作
      </a>
    ),
  },
  {
    key: 'e',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        成交
      </a>
    ),
  },
  {
    key: 'f',
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        我的协作
      </a>
    )
  }
];

const App: React.FC = () => {
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '关联订单',
      dataIndex: 'name',
      render: (name) => <div style={{ color: 'rgb(0,121,254)' }}>{name}</div>,
    },
    {
      title: '订单归属人',
      dataIndex: 'Customer',
      render: (Customer) => <div style={{ color: 'rgb(0,121,254)' }}>{Customer}</div>,
    },
    {
      title: '回款期次',
      dataIndex: 'stage'
    },
    {
      title: '计划回款金额',
      dataIndex: 'bjnum',
      render: (bjnum) => <div style={{ color: 'rgb(0,121,254)' }}>{bjnum}</div>,
    },
    {
      title: '已回款计划',
      dataIndex: 'price'
    },
   
    {
      title: '最后跟进',
      dataIndex: 'time',
      render: (time) => <div>{new Date(time).toLocaleString()}</div>,
    },
    {
      title: '未跟进天数',
      dataIndex: 'days'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a><CheckCircleFilled />跟进</a>
          <a onClick={()=>{
            showModal()
            setTitle('编辑')
            setItemobj(record)
          }}><EditFilled />编辑</a>
          <a onClick={()=>{
            let index=obj.CWtitle.findIndex(item=>item.id==record.id)
          }}><VerticalAlignTopOutlined />置顶</a>
        <Popconfirm
          title="Delete the task"
          
          description="Are you sure to delete this task?"
          onConfirm={()=>{
            dispatch(Async.async_delCW(record.id))
          }}
      
          okText="Yes"
          cancelText="No"
        >
          <a >
          <DeleteFilled />
            删除</a>
        </Popconfirm>
        </Space>
      ),
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title,setTitle]=useState('新增')
  const [itemobj,setItemobj]=useState({})

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };


  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };
  //多选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,

    ]
  };
  let dispatch=useDispatch()
let obj=useSelector(state=>state.crms)
useEffect(()=>{
  dispatch(Async.async_getCW())
},[])
  return (
    <AppLayout>
    <>
      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
      <Divider />
      <div>
        <Space>

          <Input placeholder="搜索关键词" />
          <Select
            placeholder="财务标题"
            style={{ width: 150 }}
            options={[
              { value: '初步洽谈', label: '初步洽谈' },
            ]}
          />
          <Select
            placeholder="关联客户"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <Select
            placeholder="商机阶段"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <DatePicker placeholder='预计签单日期' />
          <Button type="primary"><SearchOutlined />查询</Button>
          <Button><RedoOutlined />重置</Button>
          <Button style={{ color: 'rgb(0,121,254)' }}><ZoomInOutlined />高级搜索</Button>
        </Space>

        <Divider />
      </div>
      <Button type="primary" onClick={()=>{
        showModal()
        setTitle('新增')
        setItemobj({})
      }}>
        新增
      </Button>
      <Modal title={title} open={isModalOpen} onOk={handleOk} footer={null} onCancel={handleCancel}>
       <MyForm itemobj={itemobj} key={new Date().getTime()} onCancel={handleCancel} title={title}/>
      </Modal>
      <Table<DataType> rowSelection={rowSelection} bordered columns={columns} dataSource={obj.CWtitle} pagination={{ defaultPageSize: 8 }} rowKey="id"/>
    </>
    </AppLayout>
  )

};

export default App;